{% extends "base.html" %}
{% set page = 'settings' %}
{% block head %}
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/element-plus"></script>
<script src="https://unpkg.com/@element-plus/icons-vue"></script>
<style>
    .settings-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    .settings-group {
        background: #fff;
        border-radius: 10px;
        padding: 24px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .settings-group h3 {
        margin: 0 0 20px 0;
        color: #333;
    }
    .settings-item {
        margin-bottom: 16px;
    }
    .settings-item label {
        display: block;
        margin-bottom: 8px;
        color: #666;
    }
    .input {
        width: 100%;
        max-width: 400px;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .select {
        width: 100%;
        max-width: 400px;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .btn {
        padding: 10px 24px;
        border-radius: 4px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        margin-right: 8px;
        transition: background 0.2s;
    }
    .btn-primary {
        background: #409EFF;
        color: #fff;
    }
    .btn-primary:hover {
        background: #337ecc;
    }
    .btn-success {
        background: #67C23A;
        color: #fff;
    }
    .btn-success:hover {
        background: #529b2e;
    }
    .lang-select {
        margin-left: 16px;
        padding: 6px 12px;
        border-radius: 4px;
        border: 1px solid #ddd;
    }
    .error-tip { color: #e74c3c; margin: 20px 0; text-align: center; }
    .loading-tip { color: #409EFF; margin: 20px 0; text-align: center; }
    /* 主题样式 */
    .theme-dark {
        background: #181818 !important;
        color: #e0e0e0 !important;
    }
    .theme-dark .card, .theme-dark .settings-group {
        background: #23272f !important;
        color: #e0e0e0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    }
    .theme-dark input, .theme-dark select {
        background: #23272f !important;
        color: #e0e0e0 !important;
        border-color: #444 !important;
    }
    .theme-dark .btn, .theme-dark .btn-save, .theme-dark .btn-test {
        background: #1976d2 !important;
        color: #fff !important;
    }
    .theme-dark .btn:hover, .theme-dark .btn-save:hover, .theme-dark .btn-test:hover {
        background: #1251a3 !important;
    }
    .theme-light {
        background: #f5f7fa !important;
        color: #222 !important;
    }
    .theme-light .card, .theme-light .settings-group {
        background: #fff !important;
        color: #222 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    }
    .theme-light input, .theme-light select {
        background: #fff !important;
        color: #222 !important;
        border-color: #ddd !important;
    }
    .settings-row {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
    }
    .settings-col {
        flex: 1 1 320px;
        min-width: 300px;
        max-width: 380px;
    }
    .input {
        width: 100%;
        max-width: 300px;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .select {
        width: 100%;
        max-width: 300px;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
</style>
{% endblock %}

{% block content %}
<script id="init-data" type="application/json">
{
  "t": {{ t|tojson|safe if t is defined else '{}' }},
  "lang": "{{ lang if lang is defined else 'zh' }}"
}
</script>
<script>
const initData = JSON.parse(document.getElementById('init-data').textContent);
window._t = initData.t;
window._lang = initData.lang;
</script>
{% raw %}
<div id="app">
    <h2 v-text="t['settings_manage']"></h2>
    <div v-if="error" class="error-tip">{{ error }}</div>
    <div v-else>
        <div v-if="loading" class="loading-tip">{{ t['loading'] }}</div>
        <div v-else>
            <div class="settings-container">
                <div class="settings-row">
                    <div class="settings-group settings-col">
                        <h3 v-text="t['qa_model_settings']"></h3>
                        <div class="settings-item">
                            <label v-text="t['api_base'] + ':'"></label>
                            <input type="text" v-model="api_base" :placeholder="t['api_base_placeholder']" class="input">
                        </div>
                        <div class="settings-item">
                            <label v-text="t['api_key'] + ':'"></label>
                            <div style="display:flex;align-items:center;position:relative;">
                                <input :type="showKey ? 'text' : 'password'" v-model="api_key" :placeholder="t['api_key_placeholder']" class="input">
                                <span @click="showKey = !showKey"
                                      style="position:absolute;right:8px;cursor:pointer;z-index:10;display:flex;align-items:center;">
                                    <el-icon style="font-size:20px;color:#888;">
                                        <component :is="showKey ? 'Hide' : 'View'" />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                        <div class="settings-item">
                            <label v-text="t['model_name'] + ':'"></label>
                            <input type="text" v-model="model_name" :placeholder="t['model_name_placeholder']" class="input">
                        </div>
                        <button class="btn btn-success" type="button" @click="testConn('qa')" :disabled="loading" v-text="t['test_connection']"></button>
                    </div>
                    <div class="settings-group settings-col">
                        <h3 v-text="t['score_model_settings']"></h3>
                        <div class="settings-item">
                            <label v-text="t['score_api_url'] + ':'"></label>
                            <input type="text" v-model="score_api_url" :placeholder="t['score_api_url_placeholder']" class="input">
                        </div>
                        <div class="settings-item">
                            <label v-text="t['score_api_key'] + ':'"></label>
                            <div style="display:flex;align-items:center;position:relative;">
                                <input :type="showScoreKey ? 'text' : 'password'" v-model="score_api_key" :placeholder="t['score_api_key_placeholder']" class="input">
                                <span @click="showScoreKey = !showScoreKey"
                                      style="position:absolute;right:8px;cursor:pointer;z-index:10;display:flex;align-items:center;">
                                    <el-icon style="font-size:20px;color:#888;">
                                        <component :is="showScoreKey ? 'Hide' : 'View'" />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                        <div class="settings-item">
                            <label v-text="t['score_model_name'] + ':'"></label>
                            <input type="text" v-model="score_model_name" :placeholder="t['score_model_name_placeholder']" class="input">
                        </div>
                        <button class="btn btn-success" type="button" @click="testConn('score')" :disabled="loading" v-text="t['test_connection']"></button>
                    </div>
                </div>
                <div class="settings-group">
                    <h3 v-text="t['interface_settings']"></h3>
                    <div class="settings-item">
                        <label v-text="t['language'] + ':'"></label>
                        <select v-model="language" class="select">
                            <option value="zh" v-text="t['lang_zh']"></option>
                            <option value="en" v-text="t['lang_en']"></option>
                        </select>
                    </div>
                    <div class="settings-item">
                        <label v-text="t['theme'] + ':'"></label>
                        <select v-model="theme" class="select">
                            <option value="light" v-text="t['theme_light']"></option>
                            <option value="dark" v-text="t['theme_dark']"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div style="margin-top:32px;text-align:center;">
                <button class="btn btn-primary" type="button" @click="save" :disabled="loading" v-text="t['save']"></button>
            </div>
        </div>
    </div>
</div>

<script>
const { createApp, ref, onMounted, watch } = Vue
const { View, Hide } = window.ElementPlusIconsVue

const app = createApp({
    setup() {
        const t = window._t;
        const api_base = ref('')
        const api_key = ref('')
        const model_name = ref('')
        const score_api_url = ref('')
        const score_api_key = ref('')
        const score_model_name = ref('')
        const language = ref(window._lang || 'zh')
        const theme = ref('light')
        const loading = ref(true)
        const error = ref("")
        const showKey = ref(false)
        const showScoreKey = ref(false)

        // 校验函数
        const validate = (type) => {
            if (type === 'qa') {
                if (!api_base.value) return t['api_base_placeholder'];
                if (!/^https?:\/\/.+/.test(api_base.value)) return t['api_base_placeholder'];
                if (!api_key.value) return t['api_key_placeholder'];
                if (!model_name.value) return t['model_name_placeholder'];
                if (api_key.value.length < 8) return t['api_key_too_short'];
            } else if (type === 'score') {
                if (!score_api_url.value) return t['score_api_url_placeholder'];
                if (!/^https?:\/\/.+/.test(score_api_url.value)) return t['score_api_url_placeholder'];
                if (!score_api_key.value) return t['score_api_key_placeholder'];
                if (!score_model_name.value) return t['score_model_name_placeholder'];
                if (score_api_key.value.length < 8) return t['api_key_too_short'];
            }
            return '';
        };

        const fetchSettings = async () => {
            loading.value = true;
            error.value = "";
            try {
                const resp = await fetch('/api/settings')
                if (!resp.ok) throw new Error(t['fetch_settings_fail'] || 'Failed to fetch settings');
                const data = await resp.json()
                if (data.status === 'success') {
                    api_base.value = data.data.api_base || ''
                    api_key.value = data.data.api_key || ''
                    model_name.value = data.data.model_name || ''
                    score_api_url.value = data.data.score_api_url || ''
                    score_api_key.value = data.data.score_api_key || ''
                    score_model_name.value = data.data.score_model_name || ''
                    language.value = data.data.language || 'zh'
                    theme.value = data.data.theme || 'light'
                }
            } catch (err) {
                error.value = t['fetch_settings_fail'] || (err.message || '加载设置失败');
            } finally {
                loading.value = false;
            }
        }

        const save = async () => {
            const errMsgQa = validate('qa');
            const errMsgScore = validate('score');
            if (errMsgQa) {
                ElementPlus.ElMessageBox.alert(errMsgQa, t['alert_title'], {type:'error'});
                return;
            }
            if (errMsgScore) {
                ElementPlus.ElMessageBox.alert(errMsgScore, t['alert_title'], {type:'error'});
                return;
            }
            loading.value = true
            try {
                const resp = await fetch('/api/settings', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        api_base: api_base.value,
                        api_key: api_key.value,
                        model_name: model_name.value,
                        score_api_url: score_api_url.value,
                        score_api_key: score_api_key.value,
                        score_model_name: score_model_name.value,
                        language: language.value,
                        theme: theme.value
                    })
                })
                const data = await resp.json()
                if (data.status === 'success') {
                    document.cookie = "lang=" + language.value + "; path=/";
                    let url = window.location.pathname + window.location.hash;
                    window.location.href = url;
                } else {
                    ElementPlus.ElMessageBox.alert(data.message || t['save_fail'], t['alert_title'], {type:'error'});
                }
            } catch (error) {
                ElementPlus.ElMessageBox.alert(t['save_fail'], t['alert_title'], {type:'error'});
            } finally {
                loading.value = false
            }
        }

        const testConn = async (type) => {
            const errMsg = validate(type);
            if (errMsg) {
                ElementPlus.ElMessageBox.alert(errMsg, t['alert_title'], {type:'error'});
                return;
            }
            ElementPlus.ElMessage.info(t['testing'] || '正在连接...');
            let url = type === 'score' ? score_api_url.value : api_base.value;
            let key = type === 'score' ? score_api_key.value : api_key.value;
            let model = type === 'score' ? score_model_name.value : model_name.value;
            try {
                const resp = await fetch('/api/settings/test', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        api_base: url,
                        api_key: key,
                        model_name: model
                    })
                })
                const data = await resp.json()
                if (data.status === 'success') {
                    ElementPlus.ElMessageBox.alert(t['test_success'], t['alert_title'], {type:'success'});
                } else {
                    ElementPlus.ElMessageBox.alert(data.message || t['test_fail'], t['alert_title'], {type:'error'});
                }
            } catch (error) {
                ElementPlus.ElMessageBox.alert(t['test_fail'], t['alert_title'], {type:'error'});
            }
        }

        const applyTheme = (theme) => {
            if (theme === 'dark') {
                document.body.classList.add('theme-dark');
                document.body.classList.remove('theme-light');
                document.documentElement.style.colorScheme = 'dark';
            } else {
                document.body.classList.add('theme-light');
                document.body.classList.remove('theme-dark');
                document.documentElement.style.colorScheme = 'light';
            }
        }

        const changeLang = () => {
            document.cookie = "lang=" + language.value + "; path=/";
            let url = window.location.pathname + '?lang=' + language.value;
            window.location.href = url;
        }

        watch(theme, (newTheme) => {
            document.cookie = "theme=" + newTheme + "; path=/";
            applyTheme(newTheme);
        });

        onMounted(() => {
            fetchSettings().then(() => {
                applyTheme(theme.value);
            });
        })

        return {
            t,
            api_base,
            api_key,
            model_name,
            score_api_url,
            score_api_key,
            score_model_name,
            language,
            theme,
            loading,
            error,
            showKey,
            showScoreKey,
            save,
            testConn,
            changeLang
        }
    }
})
.use(ElementPlus)
// 全量注册图标
for (const [key, component] of Object.entries(window.ElementPlusIconsVue)) {
    app.component(key, component)
}
app.mount('#app')
</script>
{% endraw %}
{% endblock %} 